<template>
    <div class="music-list">
        <div class="back" @click="backPrePage">
            <i class="icon-back"></i>
        </div>
        <h1 class="title" v-html="title"></h1>
        <div class="bg-image" :style="bgStyle" ref="bgImage">
            <div class="play-wrapper" ref="player" v-show="songs.length">
                <div class="play" @click = "random">
                    <i class="icon-play"></i>
                    <div class="text">随机播放全部</div>
                </div>
            </div>
            <div class="filter" ref="filter"></div>
        </div>
        <div class="bg-layer" ref="layer"></div>
        <scroll @scroll="scroll" :probe-type="probeType" :listen-scroll="listenScroll" class="list" :data="songs" ref="list">
            <div class="song-list-wrapper">
                <song-list :rank="rank" @select="selectItem" :songs="songs"></song-list>
            </div>
            <div class="loading-container" v-show="!songs.length">
                <loading :title="loadTitle"></loading>
            </div>
        </scroll>
    </div>
</template>

 <script type="text/ecmascript-6">
    import Loading from 'base/loading/loading'
    import Scroll from 'base/scroll/scroll'
    import SongList from 'base/song-list/song-list'
    import {mapActions} from 'vuex'
    import {playlistMixin} from 'common/js/mixin'

    const TABBAR_HEIGHT = 40

    export default {
        mixins:[playlistMixin],    // mixin引进到组件里  组件里的同名方法会取代mixin的方法
        props:{
            songs:{
                type:Array,
                default:[]
            },
            title:{
                type:String,
                default:''
            },
            bgImage:{
                type:String,
                default:''
            },
            rank:{
                type:Boolean,
                default:false
            }
        },
        data(){
            return {
                loadTitle:'加载中...',
                scrollY:0  // 滚动的距离
            }
        },
        computed:{
            bgStyle(){
                return `background-image:url(${this.bgImage})`
            }
        },
        created(){
            this.probeType = 3
            this.listenScroll = true  // 监听滚动
        },
        mounted(){
            // console.log(this.$refs)
            this.imageHeight = this.$refs.bgImage.offsetHeight
            this.minTranslateY = -this.imageHeight + TABBAR_HEIGHT // bg-layer 滚动的最大距离
            // 计算scroll的top值
            this.$refs.list.$el.style.top = `${this.imageHeight}px`
            
        },
        methods:{
            handlePlayList(playList){
                const bottom = playList.length > 0 ? '60px' : ''
                this.$refs.list.$el.style.bottom = bottom
                this.$refs.list.refresh()
            },
            scroll(pos){
                this.scrollY = pos.y
            },
            backPrePage(){
                this.$router.back()
            },
            selectItem(item,index){
                // console.log(item,index)
                this.selectPlay({
                    list:this.songs,
                    index:index
                })
            },
            random(){  // 随机播放
                this.randomPlay({
                    list:this.songs
                })
            },
            ...mapActions([  // 调用actions.js
                'selectPlay',
                'randomPlay'
            ])
        },
        watch:{
            scrollY(newY){
                const percent = Math.abs( newY / this.imageHeight )
                let translateY = Math.max(this.minTranslateY,newY) // 返回最大值
                let zIndex = 0
                let scale = 1
                let blur = 0
                this.$refs.layer.style[`transform`] = `translateY(${translateY}px)`
                this.$refs.layer.style[`webkitTransform`] = `translateY(${translateY}px)`
                // 上滑效果
                if(newY < this.minTranslateY){  // 上滑到顶部 留出tabbar的高度
                    zIndex = 10
                    this.$refs.bgImage.style.paddingTop = 0
                    this.$refs.bgImage.style.height = `${TABBAR_HEIGHT}px`
                    this.$refs.player.style.display = 'none'
                }else{
                    this.$refs.bgImage.style.paddingTop = '70%'
                    this.$refs.bgImage.style.height = 0
                    this.$refs.player.style.display = ''
                }
                
                // 下滑效果
                if(newY > 0){
                    scale = 1 + percent
                    zIndex = 10
                }else{
                    blur = Math.min(20*percent,20)
                }
                this.$refs.bgImage.style.zIndex = zIndex
                this.$refs.bgImage.style[`transform`] = `scale(${scale})`
                this.$refs.bgImage.style[`webkitTransform`] = `scale(${scale})`
                this.$refs.bgImage.style['backdrop-filter'] = `blur(${blur})`
                this.$refs.filter.style['webkitBackdrop-filter'] = `blur(${blur}px)`
            }
        },
        components:{
            Scroll,
            SongList,
            Loading
        }
    }
</script>

<style scoped lang="stylus" rel='stylesheet/stylus'>
    @import "~common/stylus/variable"
    @import "~common/stylus/mixin"

    .music-list
        position :fixed
        z-index :100
        top :0
        left :0
        bottom :0
        right :0
        background:$color-background
        .back
            position :absolute
            top :0
            left :6px
            z-index :50
            .icon-back
                display :block
                padding :10px
                font-size :$font-size-lange-x
                color:$color-theme
        .title
            position :absolute
            top :0
            left:10%
            z-index :40
            width :80%
            no-wrap()
            text-align :center
            line-height :40px
            font-size:$font-size-large
            color:$color-text
        .bg-image
            position :relative
            width :100%
            height :0
            padding-top:70%
            transform-origin :top
            background-size:cover
            .filter
                position :absolute
                top :0
                left:0
                width :100%
                height :100%
                background:rgba(7,17,27,0)
            .play-wrapper
                position :absolute
                bottom :20px
                z-index :50
                width :100%
                .play
                    box-sizing :border-box
                    width :135px
                    padding:7px 0
                    margin :0 auto
                    text-align :center
                    border:1px solid $color-theme
                    color:$color-theme
                    border-radius :100px
                    font-size :0
                    .icon-play
                        display:inline-block
                        vertical-align:middle
                        margin-right :6px
                        font-size :$font-size-small
                    .text
                        display: inline-block
                        vertical-align: middle
                        font-size: $font-size-small
        .bg-layer
            position :relative
            height :100%
            background:$color-background
        .list
            position :fixed
            top :0
            bottom:0
            width:100%
            background:$color-background
            .song-list-wrapper
                padding:20px 30px;
            .loading-container
                position :absolute
                width :100%
                top :50%
                transform :translateY(-50%)
</style>